<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>

<style>
  .container1 {
    width: 100%;
    height: 100px;
    align-items: center;

    /*元素水平居中*/
    margin-top: 30px;
    margin-bottom: 30px;

  }

  .first {
    display: flex;
    flex-direction: row;
    text-align: left;
  }

  .name1 {
    font-size: 16px;
  }

  .name2 {
    font-size: 16px;
  }

  .name3 {
    font-size: 16px;
  }



  .button1 {
    background-color: rgb(48, 43, 43);
    color: white;
  }

  .button2 {
    background-color: rgb(48, 43, 43);
    color: white;
  }

  .button3 {
    background-color: rgb(48, 43, 43);
    color: white;
  }

  .button4 {
    background-color: rgb(48, 43, 43);
    color: white;
  }

  .container2 {
    width: 100%;
    height: 600px;
    align-items: center;

    /*边框*/
    /*元素水平居中*/
  }

  .demo-ruleForm {
    width: 30%;
  }

  .block {
    text-align: center;
  }
</style>

<body>

  <div id="app">

    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="猪只isdn：">
        <el-input v-model="formInline.idsn" placeholder="猪只isdn"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="searchuser">查询</el-button>
      </el-form-item>
      <el-form-item label="猪只批次">
        <el-select v-model="formInline.batchid" placeholder="请选择">
          <el-option v-for="item in batchlist" :key="item.id" :label="item.name" :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="searchuser2">查询</el-button>
        <el-button type="primary" @click="getall">全部</el-button>

      </el-form-item>
    </el-form>
    <div class="container2">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="猪只列表" name="first">
          <el-table ref="multipleTable" border :data="filterpigList" tooltip-effect="dark" style="width: 100%"
            @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55">
            </el-table-column>

            <el-table-column prop="idsn" label="猪只IDSN" width="120">
              <template slot-scope="scope">
                {{scope.row.basedata.idsn}}
              </template>
            </el-table-column>
            <el-table-column prop="info" label="猪只描述" show-overflow-tooltip>
              <template slot-scope="scope">
                {{scope.row.basedata.info}}
              </template>
            </el-table-column>
            <el-table-column prop="weight" label="猪只重量" show-overflow-tooltip>
              <template slot-scope="scope">
                {{scope.row.basedata.weight}}
              </template>
            </el-table-column>
            <el-table-column prop="age" label="猪只年龄(天)" show-overflow-tooltip>
              <template slot-scope="scope">
                {{scope.row.basedata.age}}
              </template>
            </el-table-column>

            <el-table-column prop="status" label="状态" show-overflow-tooltip>
              <template slot-scope="scope">
                {{scope.row.basedata.status}}
              </template>
            </el-table-column>
            <el-table-column prop="batchid" label="批次" show-overflow-tooltip>
              <template slot-scope="scope">
                {{scope.row.batchdata.name}}
              </template>
            </el-table-column>
            <el-table-column prop="isIPV" label="疫苗情况" show-overflow-tooltip>
              <template slot-scope="scope">
                <div>
                  <el-select style="width: 100px;" v-model="scope.row.basedata.isipv" placeholder="请选择">
                    <el-option v-for="item in isIPVsele" :key="item.index" :label="item.item" :value="item.item">
                    </el-option>
                  </el-select>
                  <el-button @click="updaterow(scope.$index,filterpigList)">保存</el-button>
                </div>
              </template>
            </el-table-column>
          </el-table>

        </el-tab-pane>
      </el-tabs>
    </div>
  </div>

</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.bootcss.com/axios/0.19.2/axios.js"></script>

<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
  new Vue({
    el: '#app',
    data: {

      isIPVsele: [
        {
          index: 1,
          item: "除虫疫苗"
        },
        {
          index: 0,
          item: "禽流感疫苗"
        },
        {
          index: 0,
          item: "健壮疫苗"
        }
      ],

      alertUser: false,
      alertForm: {
        id: 2,
        name: '',
        password: '',
        phone: '',
        address: '',
        info: '',
      },
      ruleForm: {
        idsn: '',
        age: '',
        ruleForm: '',
        address: '',
        info: '',
        groupid: "",
      }, options: [{
        value: '4',
        label: '销售员'
      },],
      formInline: {
        idsn: '',
        batchid: ''
      },
      activeName: 'first',
      pigList: [],
      filterpigList: [],
      multipleSelection: [],
      currentPage3: 5,
      batchlist: [],

    },
    mounted() {
      this.getPig();
      this.getBatch();
    },
    methods: {
      getBatch() {
        axios.post("/batch/getAllBatch", this.alertForm).then(res => {
          console.log(res.data)
          if (res.data.result == "1001") {
            this.batchlist = res.data.data;
            console.log(res.data)
            return;
          }
        })
      },
      getall() {
        this.filterpigList = this.pigList;
      },
      searchuser() {
        this.filterpigList = []
        var newlist = []
        this.pigList.forEach(ele => {
          if (ele.basedata.idsn == this.formInline.idsn) {
            newlist.push(ele)
          }
        })
        this.filterpigList = newlist;
      },
      searchuser2() {
        this.filterpigList = []
        var newlist = []
        this.pigList.forEach(ele => {
          if (ele.batchdata.id == this.formInline.batchid) {
            newlist.push(ele)
          }
        })
        this.filterpigList = newlist;
      },
      updaterow(index, piglist) {
        axios.post("/pig/ipvPig", { id: piglist[index].basedata.id, isipv: piglist[index].basedata.isipv }).then(res => {
          console.log(res.data)
          if (res.data.result == "1001") {
            this.$notify.success({
              title: '成功',
              message: '修改信息成功'
            })
            console.log(res.data)
            return;
          } else {
            this.$notify.error({
              title: '失败',
              message: '修改信息失败'
            })
          }
        })
      },
      getPig() {
        this.pigList = []
        axios.post("/pig/getAllPig", {}).then(res => {
          console.log(res);
          if (res.data.result == "1001") {
            res.data.data.forEach(ele => {
              this.pigList.push(ele)
            })
          }
          this.filterpigList = this.pigList;
          console.log(this.userList)
        })
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      handleClick(tab, event) {

      },
      toggleSelection(rows) {
        if (rows) {
          rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row);
          });
        } else {
          this.$refs.multipleTable.clearSelection();
        }
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      handleDelete(index, row) {
        console.log(index, row);
      },
      deleteRow(index, rows) {
        axios.post("/deluser", { name: rows[index].name }).then(res => {
          console.log(res);
          if (res.data.result == "ok")
            rows.splice(index, 1)
          this.$notify.success({
            title: '删除成功',
            message: '删除员工成功！'
          })
        })
      },
      alertRow(index, row) {
        this.alertUser = true;
        this.alertForm.id = row[index].id;
        this.alertForm.name = row[index].name;
        this.alertForm.phone = row[index].phone;
        this.alertForm.address = row[index].address;
        this.alertForm.info = row[index].info;
        this.alertForm.password = row[index].password;
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      }
    }
  })
</script>

</html>